<template>
	<view>
		<view>
			<view class="leaveNav">
				<view style="margin-left:45rpx;font-weight: 800;font-size: 46rpx;">请假管理
					<view class="leaveLine"></view>
				</view>
				<button class="leaveBtn" @click="leaveBtnFun()" :disabled="disable">提交</button>
			</view>
			<view class="leaveMgm" v-if="leaveArr.length>0">
				<checkbox-group class="leaveCheck" v-for="(item,index) in leaveArr" :key="index"
					style="margin-top:20rpx">
					<label :class="[{'isSlect':item.leaveDays!=0}]" style="display: flex;flex-direction: row;">
						<checkbox value="yes" :disabled="item.disStatus" @click="displayDate(item)"></checkbox>
						<view style="width:130rpx;font-size: 36rpx;">{{index+1}}{{item.studentName}}</view>
						<view class="fontLeave">{{item.dormitoryNo}}宿舍</view>
						<input class="leaveNum" v-if="item.leaveDays!=0" style="color: #0000FF;" disabled="disabled"
							v-model="item.leaveDays">
						<view></view>
						</input>
						<input class="leaveNum" v-if="item.leaveDays==0" disabled="disabled" v-model="item.leaveDays">
						<view></view>
						</input>


						<view :class="[item.leaveDays==0?'delCancel':'delSty']" style="margin:5rpx 20rpx;"
							@click="delFun(item)"> 删除</view>

						<view @click="displayDate(item)" style="color:#0000FF;font-size: 36rpx;margin-top:0rpx">
							请假时间
						</view>
						<!-- <span @click="CancelFun(item)" style="height:40rpx;background-color:#C0C0C0;padding:0 2rpx;
										color:white;border: #C0C0C0 solid 1rpx;border-radius: 10rpx;">
						取消</span> -->
					</label>
					<view>
						<view v-show="item.isShow" class="timePos">
							<view class="uni-title uni-common-pl">选择请假时间</view>
							<view class="uni-list">
								<view class="uni-list-cell">
									<view class="uni-list-cell-left"
										style="display: flex;justify-content: space-around;color: #0000FF;font-size: 32rpx;">
										<span>开始时间</span>
										<span style="margin-left:260rpx">结束时间</span>
									</view>
									<view class="uni-list-cell-left"
										style="display: flex;justify-content: space-around;margin-top:10rpx">
										<picker mode="date" :value="item.startDateLev" :start="startDate" :end="endDate"
											@change="bindStartDateChange($event,item)">
											<view class="uni-input">{{item.startDateLev}}</view>
										</picker>
										<view style="width:30%"></view>
										<picker mode="date" :value="item.endDateLev" :start="startDate" :end="endDate"
											@change="bindEndDateChange($event,item)">
											<view class="uni-input">{{item.endDateLev}}</view>
										</picker>
									</view>
								</view>
							</view>
						</view>

					</view>

				</checkbox-group>
			</view>
			<view v-else class="repDevice">暂无请假记录</view>
		</view>
		<!-- <my-bottom :topName="topName"></my-bottom> -->
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	export default {
		name: 'leaveManagement',
		data() {
			return {
				disable:false,
				disStatusArr: [],
				leaveDays: 0,
				leaveId: [],
				state: false,
				startDateLev: this.$date,
				endDateLev: this.$date,
				userName: '',
				endDateArray: [],
				startDateArray: [],
				studentNameArray: [],
				leaveDaysArray: [],
				phoneArray: [],
				studentNoArray: [],
				topName: '',
				classId: '',
				leaveArr: [{
						student: '欧阳修',
						dormitoryNum: '202宿舍',
						time: '请假时间',
						start: [{
							"year": '2022',
							"month": '3',
							"date": '12'
						}],
						end: [{
							"year": '2022',
							"month": '3',
							"date": '13',
							id: 34
						}],
						num: 1,
						isShow: false,
					},
					{
						student: '范增',
						dormitoryNum: '202宿舍',
						time: '请假时间',
						start: [{
							"year": '2022',
							"month": '3',
							"date": ''
						}],
						end: [{
							"year": '2022',
							"month": '3',
							"date": '',
							id: 35
						}],
						num: 0,
						isShow: false,
					},
					{
						student: '杜甫',
						dormitoryNum: '202宿舍',
						time: '请假时间',
						start: [{
							"year": '2022',
							"month": '3',
							"date": ''
						}],
						end: [{
							"year": '2022',
							"month": '3',
							"date": '',
							id: 36
						}],
						num: 0,
						isShow: false,
					},
					{
						student: '李白',
						dormitoryNum: '202宿舍',
						time: '请假时间',
						start: [{
							"year": '2022',
							"month": '3',
							"date": '12'
						}],
						end: [{
							"year": '2022',
							"month": '3',
							"date": '18',
							id: 37
						}],
						num: 6,
						isShow: false,
					}
				]
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "loginName",
				success: (res) => {
					that.userName = res.data
				}
			})

		},
		onLoad(options) {
			this.topName = options.className
			this.classId = options.classId
		},
		mounted() {
			this.getClassStuListByCName()
		},
		components: {
			topCom,
			bottomCom,
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {

			bindStartDateChange: function(e, item) {
				if (item.leaveDays > 0) {
					uni.showToast({
						title: "请删除后修改",
						icon: "none"
					})
					return;
				}
				item.startDateLev = e.target.value
				var startTime1 = new Date(Date.parse(item.startDateLev.replace(/-/g, "/")))
				var currentTime = new Date(Date.parse(this.$date.replace(/-/g, "/")))
				console.log(item.startDateLev, this.$date, currentTime == startTime1, "time", item.startDateLev == this
					.$date)
				if (item.startDateLev == this.$date) {
					item.startDateLev = e.target.value

				} else {
					uni.showToast({
						title: "请选择当前时间",
						icon: "none"
					})
					item.endDateLev = this.$date
					item.startTime = this.$date
					return;
				}
				console.log(this.$date, item.startDateLev, "data")
				this.$forceUpdate()
			},
			bindEndDateChange: function(e, item) {
				if (item.leaveDays > 0) {
					uni.showToast({
						title: "请删除后修改",
						icon: "none"
					})
					return;
				}
				item.endDateLev = e.target.value
				var endTime = new Date(Date.parse(item.endDateLev.replace(/-/g, "/")))
				var startTime = new Date(Date.parse(this.$date.replace(/-/g, "/")))
				var timeSub = new Date(Date.parse(item.startDateLev.replace(/-/g, "/")))
				if (endTime >= startTime) {
					this.$forceUpdate()
					item.leaveDays = parseInt(Math.abs(endTime.getTime() - startTime.getTime()) / 1000 / 60 / 60 /
						24) + 1
					console.log(item.leaveDays, "leaveDay")
					item.timeSub = parseInt(Math.abs(endTime.getTime() - timeSub.getTime()) / 1000 / 60 / 60 / 24) + 1

				} else {
					uni.showToast({
						title: '结束时间不能小于当前时间',
						icon: "none"
					})
					item.endDateLev = this.$date
					item.startTime = this.$date
				}
			},
			// classId,className,endDateArray,startDateArray,studentNameArray,leaveDays,phoneArray,studentNoArray
			createUpdateStuLeaves() {
				if (this.endDateArray.length == 0) {
					uni.showToast({
						title: "至少选择一条数据",
						icon: "none"
					})
					this.disable=false;
				} else {
					var myDate = new Date();
					var mytime = myDate.getHours(); //获取当前时间
					if (mytime > 21) {
						console.log(mytime > 22, mytime < 22, mytime, "time")
						uni.showToast({
							title: '当前时间不能提交',
							icon: "none"
						})
						this.getClassStuListByCName();
						this.disable=false;
						return;
					}

					this.$api.teacher.createUpdateStuLeaves(this.classId, this.topName, this.endDateArray,
						this.startDateArray, this.studentNameArray, this.leaveDaysArray, this.phoneArray, this
						.studentNoArray, this.leaveId).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '请假提交成功'
							})
							this.disable=false;
							this.getClassStuListByCName()
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
							this.disable=false;
						}

					})
				}
				// console.log(this.endDateArray.length,"length")


			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			displayDate(item) {
				this.$forceUpdate()
				item.isShow = !item.isShow
				if (item.isShow == true) {
					item.endDateLev = this.$date
				}
				for (let var1 in item.start) {
					if (item.endDate[var1].date != '' && item.startDate[var1].date != '') {
						item.num = item.endDate[var1].date - item.startDate[var1].date
					}
				}
				if (this.leaveDays > 0) {
					this.state = true
				} else {
					this.state = false
				}
			},
			getClassStuListByCName() {
				this.$api.teacher.getClassStuListByCName(this.topName).then(res => {
					this.leaveArr = res.data
					this.disStatusArr = res.data
					this.leaveArr.forEach((item, index) => {
						item.isShow = false
						item.disStatus = false
						if (item.endDate != null && item.startDate != null) {
							var endTime = new Date(Date.parse(item.endDate.replace(/-/g, "/")))
							var startTime = new Date(Date.parse(this.$date.replace(/-/g, "/")))
							item.leaveDays = parseInt(Math.abs(endTime.getTime() - startTime.getTime()) /
								1000 / 60 / 60 / 24) + 1
							item.startDateLev = item.startDate
							item.endDateLev = item.endDate
							if (item.leaveDays > 0) {
								item.disStatus = true
								this.$forceUpdate()
							}
							return;
						} else {
							item.leaveDays = 0
						}

						item.startDateLev = this.$date
						item.endDateLev = 2022
					})
				})
			},
			slectCk() {

			},
			// 提交数据
			leaveBtnFun() {
				this.disable=true;
				uni.showLoading({
					mask:true,
					title:'提交中'
				})
				this.startDateArray = []
				this.endDateArray = []
				this.leaveDaysArray = []
				this.phoneArray = []
				this.studentNameArray = []
				this.studentNoArray = []
				this.leaveId = []
				this.leaveArr.forEach((item, index) => {
					var lId = 0
					console.log(item.disStatus, "status")
					if (item.leaveDays > 0 && item.disStatus == false) {
						this.startDateArray.push(item.startDateLev)
						this.endDateArray.push(item.endDateLev)
						this.leaveDaysArray.push(parseInt(item.leaveDays))
						this.phoneArray.push(item.phone)
						this.studentNoArray.push(item.studentNo)
						this.studentNameArray.push(item.studentName)
						if (item.leaveId) {
							this.leaveId.push(item.leaveId)
						} else {
							this.leaveId.push(lId)
						}

					}

				})
				this.createUpdateStuLeaves()

			},
			// endDate,leaveId,startDate,studentNo
			delFun(item) {
				const data = this.$qs.stringify({
					leaveId: item.leaveId,
					studentNo: item.studentNo,
					startDate: item.startDate,
					endDate: item.endDate,
				});
				var date = new Date()
				var time = date.getHours();
				var current = 22
				if (item.leaveDays != 0) {
					if (time < current) {
						var _this = this
						uni.showModal({
							title: '提示',
							content: '确认取消请假？',
							success:res=> {
								if (res.confirm) {
									uni.request({
										// http://192.168.200.143:9004/app/ClassRepair/createClassRepairUpload
										// url: 'http://192.168.200.143:9004/app/StudentLeave/deleteStuLeaves',
										url:uni.url+'StudentLeave/deleteStuLeaves',
										data: {
											leaveId: item.leaveId,
											studentNo: item.studentNo,
											startDate: item.startDate,
											endDate: item.endDate
										},
										method:'post',
										success: res => {
											uni.showToast({
												title: '取消请假成功'
											})
											this.getClassStuListByCName()
										}
									})
									// _this.$http.post(`StudentLeave/deleteStuLeaves`,data).then(res=>{
									// 	uni.showToast({
									// 		title:'取消请假成功'
									// 	})
									// 	_this.getClassStuListByCName()
									// })
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showToast({
							title: "删除无效",
							icon: "none"
						})
					}


				} else {

				}

				// this.$api.teacher.deleteStuLeaves(this.$qs.stringify(item.endDate),item.leaveId,this.$qs.stringify(item.startDate),this.$qs.stringify(item.studentNo)).then()
			},
			CancelFun(item) {
				this.$forceUpdate()
				item.leaveDays = 0
				item.startDateLev = 0
				item.endDateLev = 0
			}
		}
	}
</script>

<style>
	.slectInput {
		border: 0.5rpx solid #8F8F94 !important;
	}

	.repDevice {
		text-align: center;
		font-size: 32rpx;
		color: #808080;
	}

	.delSty {
		height: 40rpx;
		background-color: red;
		padding: 0 2rpx;
		color: white;
		border: red solid 1rpx;
		border-radius: 10rpx;
		line-height: 40rpx;
		width: 80rpx;
		text-align: center;
	}

	.delCancel {
		height: 40rpx;
		background-color: #C0C0C0;
		padding: 0 2rpx;
		color: white;
		border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;
		line-height: 40rpx;
		;
		width: 80rpx;
		text-align: center;
	}

	.isSlect {
		color: red;
	}

	.dateTimeNav {
		display: flex;
		justify-content: space-around;
		align-content: space-between
	}

	.dateTimeNavTitle {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		width: 400rpx;
	}

	.dateTimeNavTitleInput {
		display: inline-block;
	}

	.timePos {
		position: relative;
		top: 0rpx;
		right: 0rpx;
		background: white;
		border: 1rpx solid #cccc;
		border-radius: 20rpx;
		padding: 20rpx;
		width: 91%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.fontLeave {
		display: flex;
		justify-content: flex-end;
		align-content: center;
		width: 150rpx;
		margin-top: 5rpx
	}

	.checkbox {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
	}

	.leaveNum {
		width: 80rpx;
		height: 50rpx;
		border-radius: 10rpx;
		padding-left: 10rpx;
		font-size: 36rpx;
		text-align: center;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 260rpx;
		height: 80rpx;
		color: white;
		font-size: 38rpx;
		font-weight: 0;
		line-height: 70rpx;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -10rpx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 32rpx;
		margin-left: 10rpx;
	}

	.leaveCheck {
		margin-left: 15rpx;
		margin-bottom: 40rpx;

	}

	.checkout {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}

	.leaveTabLine {
		width: 3upx;
		height: 60upx;
		background: #8F8F94;
		opacity: 0.78;
		position: relative;
		top: 0upx;
		left: 150upx;
	}
	.indexContent{
		height: unset !important;
	}
</style>
